page-client-filter-list {
    $manulife-color: #07a963;
    $font-color: #333;
    $tips-color: #999;
    $gray-color: #e9e9e9;
    $default-color: #666;
    $default-border: 0.35vw solid $gray-color !important;

    .scroll-content {
        padding-top:13.8889vw;
        background-color: #f5f5f5 !important;
    }

    .client-list-content-container {
        .fix-row.filter{
            visibility:hidden;
            &.show{
                visibility:visible;
            }
        }

        ion-fab.fix-row {
            width: 100vw;
            height: auto;
            .fab-ios{
                padding: 0;
                margin: 0;
                border-radius: 0;
                background-color: #fcfcfc;
                .fab-close-icon {
                    display: none;
                }
            }
            &.filter {
                .fab-ios {
                    width: 100%;
                    height: 13.6vw;
                    .tool {
                        width: 100%;
                        height: 13.6vw;
                        display: flex;
                        justify-content: space-between;
                        box-shadow: 0 0 6vw 0.1vw #eee;
                        background: #fff;
                        .client-filter-wrapper {
                            box-shadow: none;
                        }
                        client-filter-tool {
                            width: 70vw;
                        }
                        & > button {
                            width: 16.6vw;
                            height: 13.6vw;
                            margin-right: 5.56vw;
                            background: none;
                            border: none;
                            padding: 0;
                            font-size: 3.89vw;
                        }
                    }
                }
            }
        }

        //.search-wrapper {
        //    width: 100%;
        //    top: 13.889vw;
        //    height: 20.09vw;
        //    padding-bottom:3.06vw;
        //    background-color: #f5f5f5;
        //    display: flex;
        //    align-items: flex-end;
        //    overflow:hidden;
        //
        //    .search-key-wrapper {
        //        background: linear-gradient(to right, #63b24c, #018c6e);
        //        border: none;
        //        border-radius: 6vw;
        //        display: flex;
        //        justify-content: space-between;
        //        align-items: center;
        //        width: 88.89vw;
        //        height: 11.47vw;
        //        margin: 0 auto;
        //        box-shadow:0 1vw 2vw 0 #ddd;
        //        i {
        //            width: 4.5vw;
        //            height: 4.5vw;
        //            margin: auto 4.17vw auto 2vw;
        //            background-image: url(../assets/images/client/client-list/icon_search.png);
        //            background-size: cover;
        //            background-repeat: no-repeat;
        //        }
        //        input {
        //            width: 68vw;
        //            height: 7vw;
        //            margin-left:4.17vw;
        //            background: none;
        //            border: none;
        //            font-size: 3.89vw;
        //            margin-right: 0;
        //            color: #fff;
        //            &::placeholder {
        //                color: rgba(255, 255, 255, 0.5);
        //            }
        //        }
        //    }
        //
        //}

        client-filter-tool{
            width:70vw;
        }
        .tool{
            width:100vw;
            display:flex;
            justify-content: space-between;
            .wrapper{
                height:14vw;
                width:30vw;
                background-color:#ffffff;
                display:flex;
                align-items: center;
                justify-content: flex-end;
                img{
                    width:16.85vw;
                    height:auto;
                    margin-right:5.56vw;
                }
            }
        }
    }

    width: 100%;
    z-index: 10;
    padding: 8.33vw 5.55vw 0 5.55vw;
    margin-bottom: 64px;

    ion-list.list {
        margin: 0 auto;
        width: 94vw;
    }
    .noData {
        text-align: center;
        font-size: 4vw;
        color: #999;
        margin-top: 30vw;
    }

    .fab-ios-light {
        background-color: #fff;
        width:8.89vw;
        height:8.89vw;
        padding: 0;
        .go-up-icon {
            width: 100%;
            height: 100%;
            max-width: none;
        }
    }
    .filter-btn {
        width: computed-vw(180);
        height: computed-vw(80);
        line-height: computed-vw(80);
        border-radius: computed-vw(40);
        background-color: #35AC63;
        margin-right: computed-vw(60);
        margin-top: (13.6vw - computed-vw(80))/2;
        i {
            width: computed-vw(39);
            height: computed-vw(39);
            vertical-align: middle;
            background-image: url("../assets/images/activity/activity-list/icon_filter.png");
            background-size: 100% 100%;
            display: inline-block;
        }
    }
}
